<template>
    <div id="box">
        <div class="container">
            <div class="back">
                <button @click="handleClick">返回</button>
            </div>
            <h2>{{ $store.state.currentSong.name }}</h2>
            <p class="singer">{{ $store.state.currentSong.singer }}</p>
            <div class="cover">
                <img :src="$store.state.currentSong.cover" alt="">
            </div>
            <div class="control">
                <i class="iconfont icon-Previoustrack" @click="changeSong('previous')"></i>
                <i class="iconfont icon-Nexttrack" @click="changeSong('next')"></i>
            </div>
            <div class="comment">
                <h4>热门评论</h4>
                <div class="input" v-if="$store.state.currentUser && isLocal">
                    <textarea v-model="content"></textarea>
                    <button @click="sendComment">发表评论</button>
                </div>
                <div class="item" :key="data._id" v-for="data in comments">
                    <div class="user">
                        <img v-if="data.user.picUrl" :src="data.user.picUrl" alt="">
                        <img v-else src="../assets/img/defaultUser.jpg" alt="">
                        <span :title="data.user.name">{{ data.user.name }}</span>
                    </div>
                    <p>{{ data.content }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
axios.defaults.withCredentials = true;

export default {
    beforeMount() {
        let length = this.id.length;

        if (length != 24) {
            return axios({
                url: `https://autumnfish.cn/comment/hot?type=0&id=${this.id}`,
                method: 'GET',
                withCredentials: false
            }).then(res => {
                const comments = [];
                res.data.hotComments.forEach(item => {
                    const obj = {};
                    obj.content = item.content;
                    obj.user = {};
                    obj.user.name = item.user.nickname;
                    obj.user.picUrl = item.user.avatarUrl;
                    comments.push(obj);
                })
                this.comments = comments;
            })
        }

        axios.get(`http://localhost:3000/visitor/song/${this.id}`).then(res => {
            this.comments = res.data.data.comments;
        })
        let isLocal = this.$store.state.currentSong.content.indexOf(this.$store.state.host);
        if (isLocal == -1) {
            this.isLocal = false;
        } else {
            this.isLocal = true;
        }
    },
    data() {
        return {
            isLocal: false,
            content: '',
            comments: []
        }
    },
    props: ['id'],
    methods: {
        handleClick() {
            this.$store.commit('togglePlayInfo', false);
            this.$router.go(-1);
        },
        sendComment() {
            if (this.content.trim().length <= 0) {
                return false
            }

            let userId = this.$store.state.currentUser._id;
            let songId = this.$store.state.currentSong._id;
            
            axios({
                url: 'http://localhost:3000/normal/comment',
                method: 'POST',
                headers: {
                    'content-type': 'application/json'
                },
                data: {
                    user: userId,
                    song: songId,
                    content: this.content
                }
            }).then(res => {
                this.content = '';
                axios.get(`http://localhost:3000/visitor/song/${this.$store.state.currentSong._id}`).then(res => {
                    this.comments = res.data.data.comments;
                })
            })
        },
        changeSong(param) {
            if (this.$store.state.currentSong.name == '暂未播放音乐') {
                return false
            }

            if (param == 'next') {
                this.$store.commit('changeCurrentSongIndex', 1);
                let currentSong = this.$store.state.currentSongList[this.$store.state.currentSongIndex];
                this.$store.commit('changeCurrentSong', currentSong);
            } else {
                this.$store.commit('changeCurrentSongIndex', -1);
                let currentSong = this.$store.state.currentSongList[this.$store.state.currentSongIndex];
                this.$store.commit('changeCurrentSong', currentSong);
            }

            let newId = this.$store.state.currentSong._id;
            let length = newId.length;

        if (length != 24) {
            return axios({
                url: `https://autumnfish.cn/comment/hot?type=0&id=${newId}`,
                method: 'GET',
                withCredentials: false
            }).then(res => {
                const comments = [];
                res.data.hotComments.forEach(item => {
                    const obj = {};
                    obj.content = item.content;
                    obj.user = {};
                    obj.user.name = item.user.nickname;
                    obj.user.picUrl = item.user.avatarUrl;
                    comments.push(obj);
                })
                this.comments = comments;
            })
        }

        axios.get(`http://localhost:3000/visitor/song/${newId}`).then(res => {
            this.comments = res.data.data.comments;
        })
        let isLocal = this.$store.state.currentSong.content.indexOf(this.$store.state.host);
        if (isLocal == -1) {
            this.isLocal = false;
        } else {
            this.isLocal = true;
        }
        }
    },
    beforeDestroy() {
        this.$store.commit('togglePlayInfo', false);
    }
}
</script>

<style lang="scss" scoped>
    @keyframes rotate {
        form {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    #box {
        min-height: calc(100vh - 70px);
        background-color: #242424;
        color: #ccc;

        .container {
            position: relative;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
            width: 1200px;
            padding: 15px;
            margin: 0 auto;

            .back {
                position: relative;
                width: 100%;
                height: 30px;

                button {
                    position: absolute;
                    top: 0;
                    right: 35px;
                    height: 100%;
                    padding: 0 10px;
                    border: none;
                    background-color: transparent;
                    color: #ccc;
                    cursor: pointer;
                }
            }

            h2 {
                margin: 15px;
                color: #eee;
                font-size: 2rem;
                cursor: default;
            }

            .singer {
                margin: 10px;
                color: #999;
                font-size: 0.7rem;
                cursor: default;
            }

            .cover {
                overflow: hidden;
                width: 300px;
                height: 300px;
                margin: 10px;
                border: 1px solid rgba($color: #000000, $alpha: 1);
                border-radius: 50%;
                box-shadow: 0 0 30px 15px rgba($color: #000000, $alpha: 0.6);
                animation: rotate;
                animation-duration: 15s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: fill;
                }
            }

            .control {
                position: absolute;
                top: 270px;
                left: 0;
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-around;
                align-items: center;
                width: 100%;

                i {
                    color: #666;
                    font-size: 4.2rem;
                    cursor: pointer;
                }
            }

            .comment {
                width: 100%;
                padding: 15px;
                margin-top: 10px;

                h4 {
                    height: 30px;
                    line-height: 30px;
                    margin-bottom: 10px;
                    font-size: 1.2rem;
                    cursor: default;
                }

                .input {
                    position: relative;
                    width: 100%;
                    height: 80px;
                    margin-bottom: 20px;

                    textarea {
                        width: 100%;
                        height: 100%;
                        padding: 10px;
                        border: none;
                        border-bottom: 1px solid #999;
                        background-color: #242424;
                        color: #eee;
                        font-size: 1.1rem;
                        outline: none;
                        resize: none;
                    }

                    button {
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        padding: 5px;
                        border: none;
                        background-color: transparent;
                        color: #eee;
                        cursor: pointer;
                    }
                }

                .item {
                    overflow: hidden;
                    padding: 5px;
                    margin-bottom: 10px;

                    .user {
                        float: left;
                        width: 60px;
                        margin-right: 15px;

                        img {
                            float: left;
                            width: 50px;
                            height: 50px;
                            margin-bottom: 5px;
                            border-radius: 50%;
                        }

                        span {
                            clear: both;
                            display: block;
                            font-size: 0.7rem;
                            text-align: center;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            cursor: default;
                        }
                    }

                    p {
                        padding: 7px;
                        font-size: 0.7rem;
                    }
                }
            }
        }
    }
</style>